<!DOCTYPE html>
<html>
<head>
    <title>商品SKU</title>
    <link rel="stylesheet" href="/assets/css/elementui.css">
    <style>
        * {
            margin: 0;
            padding: 0px;
            box-sizing: border-box;
        }

        ul, li {
            list-style-type: none;
        }

        body {
            font-size: 12px;
        }

        [v-lock] {
            display: none;
        }

        .el-input__inner {
            height: 30px;
            line-height: 30px;
        }

        .el-button {
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
        }

        .el-button.is-round {
            height: 30px;
            line-height: 30px;
            background: none;
            border: 0;
            color: #F56C6C;
            padding: 0 10px;
        }

        .flex {
            display: flex;
            align-items: center;
        }

        .between {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .center {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mt10 {
            margin-top: 10px;
        }

        .specbox {
            padding: 20px;
        }

        .specbox .spec-top li {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 10px;
        }

        .specbox .spec-top li .tit {
            width: 100px;
            text-align: right;
            line-height: 30px;
        }

        .specbox .spec-top li .hm {
            display: flex;
        }

        .specbox .spec-top li .hm .tit {
            margin-top: 10px;
        }

        .specbox .spec-top li .val {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
        }

        .specbox .spec-top li .val .itm {
            margin: 10px 20px 0px 0;
            position: relative;
        }

        .specbox .spec-top li .val .itm .el-input__inner {
            width: 100px;
        }

        .specbox .spec-top li .val .itm .c {
            position: absolute;
            right: 0;
            top: 0;
            color: #999;
        }

        .specbox .spec-top li .val .itm .add {
            padding: 0;
        }

        .specbox .spec-table {
            border-collapse: collapse;
            width: 100%;
            border-left: 1px solid #eee;
            border-top: 1px solid #eee;
        }

        .specbox .spec-table tr th {
            border-bottom: 1px solid #eee;
            background: #f9f9f9;
            border-right: 1px solid #eee;
            padding: 10px;
        }

        .specbox .spec-table tr td {
            text-align: center;
            border-bottom: 1px solid #eee;
            width: 130px;
            background: #fff;
            border-right: 1px solid #eee;
            padding: 10px;
        }

        .specbox .spec-table tr td .el-input__inner {
            text-align: center;
            padding: 0 5px;
        }

        .specbox .spec-table tr td.td1 {
            width: auto;
        }
    </style>
</head>
<body>

<div id="app" v-lock>
    <el-card>
        <el-tabs v-model="form.type">
            <el-tab-pane label="单规格" name="1">

                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="规格名称">
                        <el-input v-model="form.specifications"></el-input>
                    </el-form-item>
                    <el-form-item label="规格值">
                        <el-input v-model="form.value"></el-input>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="form.price"></el-input>
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-input v-model="form.number"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="多规格" name="2">
                <div class="specbox">
                    <ul class="spec-top">
                        <li v-for="(item,index) in specList" :key="index">
                            <div class="ht flex">
                                <div class="tit">规格：</div>
                                <div class="val">
                                    <el-input style="width:254px;" v-model="item.label"
                                              placeholder="请输入规格名称"></el-input>
                                    <el-button type="danger" icon="el-icon-delete" @click="delSpec(index)"
                                               round></el-button>
                                </div>
                            </div>
                            <div class="hm">
                                <div class="tit">规格值：</div>
                                <div class="val">
                                    <div class="itm flex" v-for="(a,i) in item.attr" :key="i">
                                        <el-input v-model="item.attr[i]" placeholder="请输入"></el-input>
                                        <el-button class="c" v-if="i!=0" type="danger" @click="delAttr(item.attr,i)"
                                                   icon="el-icon-close" round>
                                    </div>
                                    <div class="itm">
                                        <el-button type="text" @click="addAttr(item.attr)" class="add">添加规格值
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <el-button type="primary" class="mt10" @click="addSpec">新增规格</el-button>
                    <h3 class="mt10">规格明细</h3>
                    <table class="spec-table mt10">
                        <tr>
                            <th v-for="(item,index) in specList" :key="index">{{item.label}}</th>
                            <th>
                                图片
                            </th>
                            <!--                <th>售价/元</th>-->
                            <th>售价</th>
                            <!--                <th>兑换积分</th>-->
                            <th>库存</th>
                            <!--                <th>规格编码</th>-->
                            <!--                <th>规格状态</th>-->
                        </tr>
                        <tr v-for="(item,index) in specData" :key="index">
                            <td class="td1" v-for="(a,i) in item.spec" :key="i">{{a}}</td>
                            <td>
                                <el-upload
                                        class="upload-demo"
                                        action="/api/common/upload"
                                        :on-success="success"
                                        multiple
                                        :limit="1"
                                >
                                    <el-button size="small" @click="setSpecImg(index)" type="primary">点击上传
                                    </el-button>
                                    <!--                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                                </el-upload>
                            </td>
                            <td>
                                <el-input v-model="item.price"></el-input>
                            </td>
                            <!--                <td>-->
                            <!--                    <el-input v-model="item.costPrice"></el-input>-->
                            <!--                </td>-->
                            <!--                <td>-->
                            <!--                    <el-input v-model="item.score"></el-input>-->
                            <!--                </td>-->
                            <td>
                                <el-input v-model="item.stock"></el-input>
                            </td>

                            <!--                <td>-->
                            <!--                    <div class="center">-->
                            <!--                        <el-switch v-model="item.status"></el-switch>-->
                            <!--                    </div>-->
                            <!--                </td>-->
                        </tr>
                    </table>
                    <el-button @click="submitSpec">提交</el-button>
                </div>

            </el-tab-pane>

        </el-tabs>
    </el-card>

</div>

<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/elementui.js"></script>
<script src="/assets/js/axios.js"></script>
<script>
    var goodsId = "{$id}";
    new Vue({
        el: '#app',
        data: {
            form: {
                'goods_id': goodsId,
                'specifications': "",
                'value': '',
                'price': 0,
                'number': 0,
                'type': "1",

            },
            imgIndex: "",
            specList: [
                {label: '规格1', attr: ['属于1']},
            ],
            specData: [],
            specItem: {img: '', price: '0.00', costPrice: '0.00', score: 0, stock: 10, code: '', status: 1}
        },

        watch: {
            specList: {
                handler: function (newVal, oldVal) {
                    this.setSpecData(newVal)
                },
                deep: true
            }
        },

        mounted() {
            this.specItem.code = this.getRand(14, 'S');
            this.setSpecData(this.specList);
            this.getGoodsSku()

        },

        methods: {
            setSpecImg(index) {
                this.imgIndex = index;
                console.log(this.imgIndex);
            },
            success(res) {
                this.specData[this.imgIndex].img = res.data.url;

            },
            getGoodsSku() {
                axios.post('goodsDetail', {
                    goods_id: this.form.goods_id,
                }).then(({data}) => {
                    this.form.type = data.type
                    if (data.type == '2') {
                        this.specList = data.data.specList;
                        this.specData = data.data.specData
                    } else {
                        // this.specList = data.data.specList;
                        this.value = data.data.value;
                        this.number = data.data.number
                    }
                })
            },
            submitSpec() {
                axios.post('save_sku', {
                    ...this.form,
                    specData: this.specData,
                    specList: this.specList
                }).then(({data}) => {
                    console.log(data)
                })
            },
            submit() {
                axios.post('save_sku', this.form).then(({data}) => {
                    if (data.code == -1) {
                        this.$message.error(data.msg);
                    } else {
                        this.$message.success("添加成功");
                        window.location.href('goods')
                    }
                })
            },
            getRand(length, prefix) {
                return (function (time, code) {
                    code += parseInt(time.substr(0, 1)) + parseInt(time.substr(1, 1)) + time.substr(2, 8);
                    while (code.length < length) code += Math.round(Math.random() * 10);
                    return code;
                })(Date.now().toString(), prefix || '' + '')
            },

            // 递归函数，用于生成所有规格组合的算法
            generateSpecifications(specs, index, current, result) {
                if (index === specs.length) {
                    result.push(current);
                    return;
                }
                for (var i = 0; i < specs[index].attr.length; i++) {
                    var next = current.slice();
                    next.push(specs[index].attr[i]);
                    this.generateSpecifications(specs, index + 1, next, result);
                }
            },

            //设置规格值
            setSpecData(arr) {
                let result = [], list = [];
                this.generateSpecifications(arr, 0, [], result);
                result.forEach(res => {
                    list.push({spec: res, ...this.specItem})
                })
                this.specData = list
            },

            addSpec() {
                let len = this.specList.length + 1
                this.specList.push({label: '规格' + len, attr: ['属于1']})
                this.setSpecData(this.specList)
            },

            addAttr(attr, i) {
                let len = attr.length + 1
                attr.push('属性' + len)
            },
            delSpec(index) {
                this.specList.splice(index, 1)
            },
            delAttr(attr, i) {
                attr.splice(i, 1);
            },

        }
    })
</script>
</body>
</html>
